<template>
  <view class="page-main">
    <u-navbar class="expand-housing-nav-bar" :is-back="false" :is-fixed="true" :borderBottom="true" title="公客"></u-navbar>
    <view class="body-main">
      <view class="device-status_bar"></view>
      <detailedCustomerCard v-for="(item,i) in client_publiclist" :key="i" :item="item" />
    </view>
  </view>

  </view>
</template>

<script>
  import {
    picker
  } from "@/util/reuse/picker"
  import {
    imageMixin
  } from "@/util/reuse/imageMixin"
	import detailedCustomerCard from "@/components/detailedCustomerCard.vue"
  export default {
    mixins: [picker, imageMixin],
	components:{detailedCustomerCard},
    data() {
      return {
        // 图片上传相关 start:
        maxCount: 15,
		client_publiclist:[],
        // 图片上传相关 end:


        imageList: [],
        provinceArr: [{
            name: '省份'
          },
          {
            name: '美国'
          },
          {
            name: '巴西'
          },
          {
            name: '日本'
          }
        ],
        cityArr: [{
            name: '城市'
          },
          {
            name: '美国'
          },
          {
            name: '巴西'
          },
          {
            name: '日本'
          }
        ]
      }
    },
	onShow:function(){
		uni.request({
			url:`${this.$http}/api/merchant/client_public`,
			method:'POST',
			header:{
				Authorization:'Bearer ' + this.$store.state.token
			},
			success: (res) => {
				console.log(res.data)
				if(res.data.code==200){
					this.client_publiclist = res.data.data
				}else if(res.data.code == 402 || res.data.code == 506){
                setTimeout(()=>{
                  this.$logout(res.data.msg);
                },1500)
              }
			}
		})
	},
    methods: {
      chooseImage: async function() {
        // #ifdef APP-PLUS
        // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
        if (this.sourceTypeIndex !== 2) {
          let status = await this.checkPermission();
          if (status !== 1) {
            return;
          }
        }
        // #endif

        if (this.imageList.length === 9) {
          let isContinue = await this.isFullImg();
          console.log("是否继续?", isContinue);
          if (!isContinue) {
            return;
          }
        }
        let _this = this;
        uni.chooseImage({
          sourceType: _this.sourceType[this.sourceTypeIndex],
          sizeType: _this.sizeType[this.sizeTypeIndex],
          count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[
            this.countIndex],
          success: (res) => {
            this.imageList = this.imageList.concat(res.tempFilePaths);
          },
          fail: (err) => {
            // #ifdef APP-PLUS
            if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
              this.checkPermission(err.code);
            }
            // #endif
            // #ifdef MP
            uni.getSetting({
              success: (res) => {
                let authStatus = false;
                switch (this.sourceTypeIndex) {
                  case 0:
                    authStatus = res.authSetting['scope.camera'];
                    break;
                  case 1:
                    authStatus = res.authSetting['scope.album'];
                    break;
                  case 2:
                    authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                    break;
                  default:
                    break;
                }
                if (!authStatus) {
                  uni.showModal({
                    title: '授权失败',
                    content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting()
                      }
                    }
                  })
                }
              }
            })
            // #endif
          }
        })
      },
      isFullImg: function() {
        return new Promise((res) => {
          uni.showModal({
            content: "已经有9张图片了,是否清空现有图片？",
            success: (e) => {
              if (e.confirm) {
                this.imageList = [];
                res(true);
              } else {
                res(false)
              }
            },
            fail: () => {
              res(false)
            }
          })
        })
      },
      previewImage: function(e) {
        var current = e.target.dataset.src
        uni.previewImage({
          current: current,
          urls: this.imageList
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/styles/global";
  /*@import "src/uview-ui/common/demo.scss";*/
  @import "@/uview-ui/index.scss";

  .page-main {
    min-height: 100vh;
    background-color: $greyBackgroundColor;
    @include center;
    padding-top: 88rpx;
    padding-bottom: 30rpx;

    .expand-housing-nav-bar {
      margin-bottom: 30rpx;
    }

    .body-main {
			
      .form-main1,.form-main2 {
        width: 686rpx;
        background-color: #ffffff;
        border-top-left-radius: 8rpx;
        border-top-right-radius: 8rpx;
        padding: 30rpx;
				@include bottomGreyBorder;
				border-bottom-color: $blueBorderColor ;
				border-width: 4rpx;
				.part1{
						width: 100%;
						border-radius: 8rpx;
						flex-direction: column;
						display: flex;
						.row-wrapper{
							width: 100%;
							height: 150rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.left-part,				.right-part,.whole-part{
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								width: 280rpx;
								height: 112rpx;
								padding-bottom: 14rpx;
								@include bottomGreyBorder;
								.row-name{
									max-width: 250rpx;
									@include ellipsis;
									height: 48rpx;
									font-size: 24rpx;
									line-height: 48rpx;
									color: #969799;
									/*margin-bottom: 8rpx;*/
								}
								.input-wrapper{
									position: relative;
									height: 48rpx;
									width: 100%;
									.uni-input{
										width: 100%;
										font-size: 28rpx;
										line-height: 48rpx;
										color: #3d444c;
										/*color: #969799;*/
										@include ellipsis;
										
									}
									.triangle-down-arrow{
										position: absolute;
										right: 0;
										top: 50%;
										margin-top: -6rpx;
										width: 12rpx;
										height: 12rpx;
										background-image: url("@/static/images/record/triangle-arrow@3x.png");
										@include contain-no-repeat-center;
									}
								}
							}
							.whole-part{
								width: 622rpx;
								height: 112rpx;
								@include bottomGreyBorder;
								
							}
						}
						.record-progress{
							width: 609rpx;
							height: 114rpx;
							border: solid 2rpx #ebedf0;
							@include center;
							.status-icon-text{
								width: 170rpx;
								display: flex;
								@include center;
								flex-direction: column;
								.icon{
									height:  38rpx;
									width:  38rpx;
									@include cover-no-repeat-center;
								}
								
								.text{
									width: 100%;
									@include ellipsis;
									height: 48rpx;
									font-size: 24rpx;
									line-height: 48rpx;
									letter-spacing: 0rpx;
									color: #ba9d61;
									text-align: center;
								}
								.inactive-text{
									color: #969799;
								}
								
							}
							.right-arrow{
								height: 30rpx;
								width:  30rpx;
								@include contain-no-repeat-center;
								/*background-color: #D8D8D8;*/
							}
							.active-right-arrow{
								background-image: url("@/static/images/record/right-arrow@3x.png") ;
								
							}
							.inactive-right-arrow{
								background-image: url("@/static/images/record/inactive-right-arrow@3x.png") ;
								
							}
						}
					}
				
				
				
        .part1,
        .part2 {
          .row {
            width: 100%;
            height: 104rpx;
            @include bottomGreyBorder;
            display: flex;
            justify-content: space-between;

            .row-name-left {
              height: 100%;
              align-items: center;
              display: flex;
              width: 190rpx;
              font-size: 28rpx;
            }

            .right-part {
              color: #bdc4ce;
              height: 100%;
              width: 450rpx;
              /*background-color: #D8D8D8;*/
              display: flex;
              align-items: center;

              .uni-input {
                width: 430rpx;
                height: 48rpx;
                font-size: 28rpx;
                color: #969799;

              }

              .input-wrapper {
                width: 100%;

                .uni-input {
                  max-width: 80rpx;
                  @include ellipsis;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }

          .double-height-row {
            height: 212rpx;
            display: flex;
            flex-direction: column;
            width: 100%;

            .input-wrapper {
              width: 120rpx !important;
              margin-left: 90rpx;
              display: flex;
              align-items: center;

              &:first-child {
                margin-left: 0rpx;

              }

            }
          }

        }

        .part2 {
          margin-top: 48rpx;

          .part2-title {
            width: 100%;
            height: 48rpx;
            font-weight: bold;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #3d444c;
            margin-bottom: 24rpx;
          }

          .part2-desc {
            width: 442rpx;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            letter-spacing: 0rpx;
            color: #969799;
          }

          .blue-wide-button {
            width: 448rpx;
						margin-top: 48rpx;
          }

        }

      }
    	.form-main2{
				height: 962rpx;
			}
		}


  }
</style>

<style lang="scss">
  @import "../assets/styles/global";

  // 内有arrow
  .shared-picker {
    position: relative;

    .triangle-down-arrow,
    .arrow-down-triangle {
      width: 20rpx;
      height: 20rpx;
      @include contain-no-repeat-center;
      background-image: url("@/static/images/arrow.png");
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10rpx;
    }

    .arrow-down-triangle {
      width: 12rpx;
      height: 12rpx;
      margin-top: -6rpx;
      background-image: url("@/static/images/record/triangle-arrow@3x.png");

    }

  }
</style>
